<template>
    <div>
        <Modal v-model="switchOff" width="600">
            <p slot="header" style="text-align:center">
                <span>选择分组</span>
            </p>
            <div>
                <Table class="modal-table" :columns="listData" :data="groupData" :height="tableHeight"></Table>
                <Input v-model="addGroupTitle" class="addGroup" placeholder="输入分组标题，回车生成分组" @keyup.enter.native="addGroupFn(addGroupTitle)" />
            </div>
            <div class="disFlex Flex-center" slot="footer">
                <Button size="large" type="primary" @click="commitFn">添加</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    // 分销分组添加
    import {distributionGroupAdd} from 'api/distribution'

    // 获取vuex分销分组
    import {mapGetters} from 'vuex'

    // vuex仓库
    import store from '@/store/index'

    export default {
        name: 'distributionGroupSelect',
        data () {
            return {
                // 弹窗开关
                switchOff: false,

                // 列表数据
                listData: [
                    {
                        title: '组名称',
                        key: 'group_title'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            let isClickIndex = this.hasClickArray.findIndex(item => item.group.distribution_group_id == params.row.distribution_group_id)
                            let str = isClickIndex >= 0 ? '取消' : '选择'
                            return h('div', {
                                on: {
                                    mouseup: () => {
                                        if(isClickIndex >= 0) {
                                            this.$Message.warning('已经选择该分组');
                                        }else {
                                            let _style = []
                                            if(this.hasClickArray.length == 0){
                                                _style = this.defaultStyle
                                            }else {
                                                _style = JSON.parse(JSON.stringify(this.hasClickArray))[0].style
                                            } 

                                            this.hasClickArray.push({
                                                group: params.row,
                                                style: _style
                                            })
                                        }
                                    }
                                }
                            },[
                                h('Button', {
                                    props: {
                                        type: isClickIndex >= 0 ? 'default' : 'primary',
                                        size: 'large'
                                    },
                                }, str)
                            ]); 
                        }
                    }
                ],

                // 新增分组名
                addGroupTitle: '',

                // 所有分组
                groupData: [],

                // 已选分组
                hasClickArray: [],

                // 表格高度
                tableHeight: 400,

                defaultStyle: null,
            }
        },
        computed:{
            ...mapGetters({
                distributionGroup: 'distribution',
            }),
        },
        methods: {
            // 监听添加分组
            addGroupFn(_name){
                let params = {
                    groupTitle: _name
                }
                distributionGroupAdd(params).then(_data => {
                    _data.data.group.forEach((item,index) => {
                        this.groupData.splice(index,1,item)
                    })
                    store.commit('SET_DISTRIBUTION', this.groupData)
                    this.$Message.success('添加成功');
                }).catch(_err => {
                    console.log(_err)
                    this.$Message.error('添加失败');
                }).finally(() => {
                    this.addGroupTitle = ''
                })
            },

            // 提交方法
            commitFn(){
                this.$emit('commitGroupFn',JSON.parse(JSON.stringify(this.hasClickArray)))
                this.switchOff = false
            },

            // 打开分组选择器
            openFn(_allArray,_hasSelectArray,_style){
                this.groupData = JSON.parse(JSON.stringify(_allArray))
                this.hasClickArray = JSON.parse(JSON.stringify(_hasSelectArray))

                this.defaultStyle = JSON.parse(JSON.stringify(_style))

                this.switchOff = true

                // 初始化表格高度/监听窗口变化
                this.windowResizeFn()
            },

            // 监听窗口变化
            windowResizeFn(){
                // 设置表格高度
                let allHeight = document.body.clientHeight&&document.documentElement.clientHeight * 0.4

                this.tableHeight = parseInt(allHeight)
                
                // 监听窗口变化
                window.onresize = () => {
                    let allHeight = document.body.clientHeight&&document.documentElement.clientHeight * 0.4
                    this.tableHeight = parseInt(allHeight)
                };
            },
        }
    }
</script> 
<style lang="less" scoped>
    .addGroup {
        margin-top: 20px;
    }
</style>